<template>
	<div class="container">
		<el-row>
			<el-col :span="24">
				<yd-form v-if="isForm" ref="myForm" :options="formOptions" :model="state.params" @change="handlerSelectChange" @formInit="handlerFormInit">
					<template #form-btn>
						<div>
							<el-button class="yd-form-btn" type="primary" @click="loadData()">查询</el-button>
						</div>
					</template>
				</yd-form>
			</el-col>
			<el-col :span="24">
				<YdTable
					:formData="state.params"
					:tableConfig="tableConfig"
					:tableData="dataList"
					@sizeChangeHandler="loadData()"
					@currentChangeHandler="loadData()"
					@sortChangeHandler="loadData()"
				></YdTable>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="alarm-query">
import { useDataTable } from '@/hooks';
import { onActivated, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { queryDataAlarm } from '@/api/middle-monitor/alarm-query';
import { useRoute } from 'vue-router';
import { calculateTimeBefore, getDefaultDate, getDefaultLast1hDate } from '@/utils/common';
import { publicValue } from '@/api/search/searchOptions';

const { dataList, pageConfig, initData, loadData } = useDataTable();
const route = useRoute();
const state = reactive({
	params: {
		startTime: '',
		endTime: '',
		orgName: '',
		abilityName: '',
		serviceName: '',
		systemName: '',
		pageNum: 1,
		pageSize: 10,
		...route.query,
	},
	tableData: [],
});
const formOptions = reactive<FormOptionType>([
	// {
	// 	type: 'select',
	// 	label: '单位属性',
	// 	prop: 'unitattribute',
	// 	selectKey: 'value',
	// 	attrs: {
	// 		indeterminate: false,
	// 	},
	// },
	{
		type: 'input',
		label: '能力名称',
		prop: 'abilityName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '服务名称',
		prop: 'serviceName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '系统名称',
		prop: 'systemName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '单位名称',
		prop: 'orgName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		dateType: 'datetimerange',
		enableCrossDay: true,
		// shortcutsKeys: ['last1h', 'today', 'lastDay'],
		// defaulShortcutsKey: 'lastlh',
		span: 10,
	},
]);
// 列表配置
const tableConfig = reactive<TableConfigType>({
	// remote: queryDataAlarm,
	columns: [
		{
			label: '告警时间',
			prop: 'alarmTriggerTime',
		},
		{
			label: '告警指标',
			prop: 'alarmName',
		},
		{
			label: '告警等级',
			prop: 'levelName',
		},
		{
			label: '告警内容',
			prop: 'alarmText',
			width: 600,
		},
		{
			label: '能力名称',
			prop: 'abilityName',
		},
		{
			label: '服务名称',
			prop: 'serviceName',
		},
		{
			label: '系统名称',
			prop: 'systemName',
		},
		{
			label: '单位名称',
			prop: 'orgName',
		},
	],
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	loading: false,
});

/**
 * 下拉框change
 */
function handlerSelectChange(options: BaseOptionType, value: any) {
	console.log(options, value, '下拉框change');
}

let isForm = ref(false);
async function publicValueFn() {
	// 将时间还原成当前最新时间再重新去计算，不然会出现时间持续处理的情况
	state.params.startTime = getDefaultLast1hDate(1);
	state.params.endTime = getDefaultDate();
	let res = await publicValue();
	let minutes = res.data || 5;
	isForm.value = true;
	state.params.endTime = calculateTimeBefore(minutes, state.params.endTime);
	if (state.params.startTime.indexOf('00:00:00') === -1) {
		state.params.startTime = calculateTimeBefore(minutes, state.params.startTime, 'last1h');
	}
}
onActivated(() => {
	isForm.value = false;
	publicValueFn();
	setTimeout(() => {
		initData(queryDataAlarm, state.params);
	}, 200);
});
/**
 * 表单初始化数据
 */
//  async function handlerFormInit(options: BaseOptionType) {
// 	console.log(options, 'init options');
// 	await publicValueFn();
// }
// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		for (let key in query) {
			if (Array.isArray(formData[key])) {
				formData[key] = [];
				if (query[key]) {
					formData[key].push(query[key]);
				}
			} else {
				formData[key] = query[key];
			}
		}
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
	if (formData.systemId) {
		formData.systemId += '';
	}
}
async function handlerFormInit() {
	initQuery(route.query, state.params);
}

onBeforeMount(() => {
	let orgName = (route.query.orgName as string | undefined) || '';
	if (orgName) {
		state.params.orgName = orgName;
	}
});

onMounted(() => {});
watch(
	() => pageConfig,
	(newVal) => {
		tableConfig.pagination!.total = newVal.total;
	},
	{ deep: true }
);
</script>

<style scoped lang="scss"></style>
